<template>
  <div class="product-waterfall-card" @click="handleClick">
    <!-- 商品图片 -->
    <div class="product-image-wrapper">
      <van-image
        :src="product.image"
        :alt="product.title"
        fit="cover"
        lazy-load
        class="product-image"
        :style="{ height: imageHeight + 'px' }"
        @load="handleImageLoad"
        @error="handleImageError"
      >
        <template #loading>
          <van-loading type="spinner" size="20" />
        </template>
        <template #error>
          <div class="image-error">
            <van-icon name="photo-fail" size="24" />
          </div>
        </template>
      </van-image>
      
      <!-- 商品标签 -->
      <div v-if="product.tags && product.tags.length" class="product-tags">
        <van-tag
          v-for="tag in product.tags.slice(0, 2)"
          :key="tag"
          class="product-tag"
        >
          {{ tag }}
        </van-tag>
      </div>
    </div>

    <!-- 商品信息 -->
    <div class="product-info">
      <!-- 商品标题 -->
      <h3 class="product-title">{{ product.title }}</h3>
      
      <!-- 商品价格 -->
      <div class="product-price">
        <span class="current-price">¥{{ product.price }}</span>
        <span v-if="product.originalPrice" class="original-price">¥{{ product.originalPrice }}</span>
      </div>
      
      <!-- 商品销量和评分 -->
      <div class="product-stats">
        <div class="sales">
          <van-icon name="shop-o" size="12" />
          <span>{{ formatSales(product.sales) }}</span>
        </div>
        <div v-if="product.rating" class="rating">
          <van-rate
            :model-value="product.rating"
            size="10"
            readonly
            allow-half
            color="#ff6034"
            void-color="#eee"
          />
          <span class="rating-text">{{ product.rating }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 商品数据接口
export interface ProductItem {
  id: string | number
  title: string
  image: string
  price: number
  originalPrice?: number
  sales: number
  rating?: number
  tags?: string[]
}

// Props
interface Props {
  product: ProductItem
  minImageHeight?: number
  maxImageHeight?: number
}

const props = withDefaults(defineProps<Props>(), {
  minImageHeight: 150,
  maxImageHeight: 300
})

// Emits
const emit = defineEmits<{
  click: [product: ProductItem]
  imageLoad: [product: ProductItem]
  imageError: [product: ProductItem]
}>()

// 响应式数据
const imageHeight = ref(getRandomHeight())

// 计算属性
const getTagType = computed(() => (tag: string) => {
  const tagTypes = ['primary', 'success', 'warning', 'danger']
  const index = tag.length % tagTypes.length
  return tagTypes[index]
})

// 方法
function getRandomHeight(): number {
  return Math.floor(Math.random() * (props.maxImageHeight - props.minImageHeight + 1)) + props.minImageHeight
}

function formatSales(sales: number): string {
  if (sales >= 10000) {
    return `${(sales / 10000).toFixed(1)}万`
  }
  return sales.toString()
}

function handleClick(): void {
  emit('click', props.product)
}

function handleImageLoad(): void {
  emit('imageLoad', props.product)
}

function handleImageError(): void {
  emit('imageError', props.product)
}
</script>

<style scoped>
.product-waterfall-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  margin-bottom: 12px;
}

.product-waterfall-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.product-image-wrapper {
  position: relative;
  width: 100%;
}

.product-image {
  width: 100%;
  display: block;
}

.image-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f5f5f5;
  color: #999;
}

.product-tags {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-tag {
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.9) !important;
}

.product-info {
  padding: 12px;
}

.product-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.current-price {
  font-size: 16px;
  font-weight: 600;
  color: #ff6034;
}

.original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.product-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

.sales {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rating-text {
  font-size: 11px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .product-info {
    padding: 10px;
  }
  
  .product-title {
    font-size: 13px;
  }
  
  .current-price {
    font-size: 15px;
  }
}
</style>